<template>
  <div v-cloak class="main">
    <!-- 方块 -->
    <div class="div_block"></div>
    <!-- 圆 -->
    <div class="div_garden"></div>
    <!-- 左侧边栏 -->
    <div class="left_herd">
      <div></div>
      <el-avatar :src="this.$store.state.admin.imgUrl"></el-avatar>
    </div>
    <!-- 右侧边栏 -->
    <div class="right_herd">
      <div class="div_active_bottom">
        <i class="el-icon-switch-button" @click="logout"></i>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <div class="nav">
      <el-menu :default-active="activeIndex" @select="handleSelect">
        <el-menu-item
          index="4"
          style="--clr: #f44336; padding: 0"
          :class="{ active: activeIndex === '4' }"
        >
          <router-link to="/feedback">
            <span><i class="el-icon-s-opportunity"></i></span>
          </router-link>
        </el-menu-item>

        <el-menu-item
          index="3"
          style="--clr: #9932cc; padding: 0"
          :class="{ active: activeIndex === '3' }"
        >
          <router-link to="/tag">
            <span><i class="el-icon-circle-plus"></i></span>
          </router-link>
        </el-menu-item>
        <el-menu-item
          index="2"
          style="--clr: lightseagreen; padding: 0"
          :class="{ active: activeIndex === '2' }"
        >
          <router-link to="/article">
            <span><i class="el-icon-s-promotion"></i></span>
          </router-link>
        </el-menu-item>

        <el-menu-item
          index="1"
          :class="{ active: activeIndex === '1' }"
          style="--clr: #2396f3; padding: 0"
        >
          <router-link to="/index">
            <span><i class="el-icon-s-platform"></i></span>
          </router-link>
        </el-menu-item>
        <el-menu-item
          index="5"
          style="--clr: #0fc70f; padding: 0"
          :class="{ active: activeIndex === '5' }"
        >
          <router-link to="/user">
            <span><i class="el-icon-s-custom"></i></span>
          </router-link>
        </el-menu-item>
        <el-menu-item
          index="6"
          style="--clr: orange; padding: 0"
          :class="{ active: activeIndex === '6' }"
        >
          <router-link to="/comments">
            <span><i class="el-icon-message-solid"></i></span>
          </router-link>
        </el-menu-item>
        <el-menu-item
          index="7"
          style="--clr: #909399; padding: 0"
          :class="{ active: activeIndex === '7' }"
        >
          <router-link to="/setting">
            <span><i class="el-icon-s-tools"></i></span>
          </router-link>
        </el-menu-item>
        <div class="indicator"></div>
      </el-menu>
    </div>
    <el-card class="div_card">
      <RouterView></RouterView>
    </el-card>
    <!-- 侧边导航栏 -->
    <!-- <el-card class="div_active_top">
        <el-avatar :src="admin.imgUrl"></el-avatar>
        <Divider></Divider>

        <el-menu
          :default-active="currentIndex"
          active-text-color="orange"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <RouterLink to="index">
            <el-menu-item index="1"
              ><i class="el-icon-s-data"></i
            ></el-menu-item>
          </RouterLink>
          <RouterLink to="user">
            <el-menu-item index="2"
              ><i class="el-icon-s-custom"></i
            ></el-menu-item>
          </RouterLink>
          <RouterLink to="article">
            <el-menu-item index="3"
              ><i class="el-icon-s-promotion"></i
            ></el-menu-item>
          </RouterLink>

          <RouterLink to="comments">
            <el-menu-item index="4"
              ><i class="el-icon-chat-dot-square"></i
            ></el-menu-item>
          </RouterLink>

          <RouterLink to="feedback">
            <el-menu-item index="5"
              ><i class="el-icon-message"></i
            ></el-menu-item>
          </RouterLink>
        </el-menu>
        <div class="div_active_bottom">
          <i class="el-icon-switch-button" @click="logout"></i>
        </div>
      </el-card> -->

    <!-- <div
      style="
        background-color: rgb(240, 243, 245);
        position: relative;
        z-index: 1;
        overflow: hidden;
      "
    > -->
    <!-- 白色card -->
    <!-- <el-row>
        <el-col :span="3"
          ><div class="grid-content bg-purple" style="height: 100vh"></div
        ></el-col>
        <el-col :span="20"
          ><div
            id="div_main_card"
            class="grid-content bg-purple-light"
            style="height: 80vh; position: relative; z-index: 1"
          >
            <el-card class="card_main">
              <RouterView></RouterView>
            </el-card></div
        ></el-col>
      </el-row> -->

    <!-- </div> -->
  </div>
</template>
<!-- 引入外部CSS文件 -->
<style>
@import url(../css/MainComponent.css);
</style>

<!-- 引入外部JS文件 -->
<script src="../js/MainComponent.js"></script>
